<template>
    <van-popup v-model:show="state.show" position="bottom" round teleport="body" @closed="closedFn()">
        <view class="top-up-box">
            <view class="top-up-head">
                支付订单
            </view>
            <view class="pay-order-main">
                <view class="pay-order-title-top">
                    实付金额
                </view>
                <view class="pay-order-title">
                    <text>￥</text>
                    <text>{{ props.amount.Price }}</text>
                </view>
                <view class="top-up-head-left">
                    <text>金币支付：</text>
                    <img src="@/assets/image/icon25.png" alt="">
                    <text>{{ props.amount.Bid }}</text>
                </view>
                <view class="top-up-head-left">
                    <text>{{ props.amount.ShowName }}</text>
                </view>
            </view>
            <PayOrderList @update:payWayType="ev => state.payWay = ev.payWay" />
            <van-button type="primary" :loading="state.isLoading" class="top-up-confirm" @click="payFn()">确定</van-button>
        </view>
    </van-popup>
</template>
    
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import {showToast} from "vant"
import {
    PayCurOrder
} from "@/api/person/index.js"

import PayOrderList from "@/pages/home/components/payOrder/payOrderList/index.vue"

import { onLoad } from '@dcloudio/uni-app'

let { proxy } = getCurrentInstance()

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    amount: {
        type: Object,
        default: () => { }
    },
    orderDesc:{
        type: String,
        default: ""
    },
    payPage:{
        type: String,
        default: ""
    }
})

const emits = defineEmits(["update:show"])

const state = reactive({
    show: false,
    curIndex: false,
    payWay: 0,// 选择支付方式
    isLoading: false
})

onLoad((options) => {

})

onMounted(() => {
    state.show = props.isShow
})

const closedFn = () => {
    emits("update:show", false)
}

const payFn = async () => {
    console.log(state)
    let params = { 
            "paySource": 0, 
            "orderDesc": props.orderDesc, 
            "receivable": 336, 
            "itemType": 1, 
            "userId": getAuthorization('userId'), 
            "TreadType": 4, 
            "priceId": props.amount.Id, 
            "order_Money": props.amount.Price, 
            "num": 1, 
            "orderType": 0, 
            "payWay": state.payWay, 
            "payPage": props.payPage
        }
    try {
        state.isLoading = true
        let data = await proxy.$post(PayCurOrder, params)
        state.isLoading = false
        console.log(data,'message')
        if (data.code == 200) {
            // 支付宝
            if(state.payWay == 1){
            let {outTradeNo, paymentId} = data.data
            setAuthorization('payOrderData', data.data)
            state.paymentResult = data.data
            var resData = data.data.contentMap
            document.getElementById('payMent').innerHTML = resData;
            let _value = document.getElementById('biz_content').value;
            let _value_sign = document.getElementById('sign').value;
            let _after_value = decodeURIComponent(_value);
            let _after_sign_value = decodeURIComponent(_value_sign);
            document.getElementById('biz_content').value = _after_value// _after_value
            document.getElementById('sign').value = _after_sign_value;
            document.forms[0].setAttribute('target', '_self') // 当前窗口跳转
            document.forms['payform'].submit();
            }
            // 微信
            if(state.payWay == 2){

            }

            // 金币
            if(state.payWay == 3){
                uni.navigateTo({
                    url: '/pages/home/index'
                })
            }
            state.show = false
        }else{
            showToast(error.message)
        }
    } catch (error) {
        state.isLoading = false
        showToast(error.message)
    }

}


</script>
    
<style lang="scss" scoped>
.top-up-head {
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    padding: 30rpx;
}

.top-up-head-left {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    padding: 20rpx 30rpx;
    position: relative;

    text:nth-child(1) {
        color: #666;
    }

    img {
        width: 36rpx;
        margin-right: 10rpx;
    }
}

.pay-order-title-top {
    font-size: 28rpx;
    text-align: center;
    font-weight: bold;
    color: #262626;
}

.pay-order-title {
    font-size: 48rpx;
    color: #262626;
    font-weight: bold;
    text-align: center;
    margin-top: 20rpx;

    text:nth-child(1) {
        font-size: 32rpx;
    }
}


.top-up-confirm {
    width: calc(100% - 60rpx);
    margin: 10rpx 30rpx 30rpx 30rpx;
    font-size: 32rpx;
}

</style>
    